<template>
  <nav>
    <ul>
      <!-- <li v-if="itemShow.item_01"><router-link to="/initiatingprocess"><span>发起流程</span></router-link></li>
      <li v-if="itemShow.item_02"><router-link to="/dueout"><span>待发事项</span></router-link></li>
      <li v-if="itemShow.item_03"><router-link to="/backlog"><span>待办事项</span></router-link></li>
      <li v-if="itemShow.item_04"><router-link to="/runmatters"><span>已办事项</span></router-link></li>
      <li v-if="false"><router-link to="/orderquery"><span>订单查询</span></router-link></li>
      <li v-if="itemShow.item_06"><router-link to="/customermanagement"><span>客户管理</span></router-link></li>
      <li v-if="itemShow.item_07"><router-link to="/customercredit"><span>客户授信</span></router-link></li>
      <li v-if="itemShow.item_08"><router-link to="/usermanagement"><span>用户管理</span></router-link></li>
      <li v-if="itemShow.item_09"><a href="http://10.48.210.13:13999/index.html" target="_blank"><span>企业查询</span></a></li> -->
      <li v-for="(item, index) in itemRes"  :key="index" v-if="(item.resourceId != 'item_05')"><router-link :to="{ path: '/' + item.resourcesUrl}"><span @click="itemEvent">{{ item.resourceName }}</span></router-link></li>
    </ul>

  </nav>
</template>
<script>
  import {setStore, getStore} from '@/assets/js/common'

  export default {
    data() {
      return {
        itemShow: {
          item_01: false,
          item_02: false,
          item_03: false,
          item_04: false,
          item_05: false,
          item_06: false,
          item_07: false,
          item_08: false,
          item_09: false
        },
        itemArr: ['item_01', 'item_02', 'item_03', 'item_04', 'item_05', 'item_06', 'item_07', 'item_08', 'item_09'],
        itemRes: [],
        isSearch: true
      };
    },
    created(){

      const hashItem = {
        'item_01' : 'initiatingprocess',
        'item_02' : 'dueout',
        'item_03' : 'backlog',
        'item_04' : 'runmatters',
        'item_05' : 'orderquery',
        'item_06' : 'customermanagement',
        'item_07' : 'customercredit',
        'item_08' : 'userManagement',
        'item_09' : 'searchCompany'
      };

        let itemResObj = JSON.parse(getStore('resources'));
        try {

          for (let itemObj of itemResObj) {
            itemObj.resourcesUrl = hashItem[itemObj.resourceId];
          }
        } catch (e) {}

      this.itemRes = itemResObj;

      //
      // try {
      //   let itemResObj = JSON.parse(getStore('resources'));
      //
      //   for (let itemObj of itemResObj) {
      //     if (this.itemArr.contains(itemObj.resourceId)) {
      //       this.itemShow[`${itemObj.resourceId}`] = true;
      //     }
      //   }
      // } catch (e) {}

    },
    mounted() {

      var li = document.getElementsByTagName('nav')[0].getElementsByTagName("li");
      var length = li.length;
      for (var i = 0; i < length; i++) {
          li[i].index = i;
          li[i].onclick = function(ev) {
              var e = ev || event;
              e.stopPropagation();
              li[this.index].setAttribute('class', 'activeItem');
              for (var j = 0; j < length; j++) {
                  li[j].className = '';
              };
              this.className = 'activeItem';
          }
      };

      // document.onclick = function() {
      //   for (var j = 0; j < length; j++) {
      //       li[j].className = '';
      //   };
      // }

    },
    watch: {
       '$route' (to, from) {
         //  console.log(to, to.path.indexOf('initiatingprocess') != -1, from.path.indexOf('initiatingprocess') != -1, '---from')
         if (to.path.indexOf('initiatingprocess') != -1 && from.path.indexOf('initiatingprocess') != -1) {
           setStore('isCreatFlow',1)
         }else if(to.name == 'home' || to.name == 'personmsg'){
            var li = document.getElementsByTagName('nav')[0].getElementsByTagName("li");
            var length = li.length;
            for (var j = 0; j < length; j++) {
              li[j].className = '';
            };
         }else{
           setStore('isCreatFlow','')
         }
       }
    },
    methods: {
      itemEvent(tab) {

        if (tab.target.innerText === '企业查询') {
          // let openUrl = 'http://10.48.210.13:13999/index.html';
          // let openUrl = 'http://47.104.93.41/index2.html';
          let openUrl = '/search.html';
          window.open(openUrl);
        } else if (tab.target.innerText === '发起流程') {
          this.specialInitialProcess();
        } else {
          return false;
        }

      },
      specialInitialProcess(){
        let dom = document.querySelector('.initiatingprocess .routers-ctrl');
        if (dom){
          dom.style.zIndex = '0';
        }
      }
    }
  };
</script>

<style lang="sass">
  nav
    background: #fff
    width: 180px
    position: fixed
    top: 0
    left: 0
    z-index: 9
    min-height: 620px
    padding-top: 80px
    height: 100%

    ul
      padding: 20px
      .activeItem
        opacity: .85
        span
          text-indent: 30px
          background: #409EFF
      li
        margin-bottom: 10px
        transition: all .6s
        &:hover
          opacity: .85
          span
            text-indent: 30px
        span
          width: 140px
          height: 40px
          display: block
          text-align: center
          line-height:  40px
          background: #378EE0
          color: #fff
          border-radius: 6px
          transition: all .6s

</style>
